$(function () {
    // let arr = {
    //     totalArticle:'',
    //         // number	文章总数
    //     dayArticle:'',
    //         // number	日新增文章数
    //     totalComment:'',
    //         // number	总评论数
    //     dayComment:'',
    //         // number	日新增评论数
    // }
    


    // 1.get     /admin/data/info
    function dataInfo() {
        $.get('/admin/data/info', function (resData) {
            let data = resData
            $('.totalCount em').text(data.totalArticle)
            $('.totalCount_day em').text(data.dayArticle)
            $('.commentCount em').text(data.totalComment)
            $('.commentCount_day em').text(data.dayComment)
            
            })
        }

    // 2.日新增文章数量统计   /admin/data/article   get
    function dataArticle() {
        $.get('/admin/data/article', function (resData) {
            // console.log(resData);
            let data = resData.date
            const myChart = echarts.init(document.getElementById('day_article_show'));

            const option = {
                tooltip: {
                    trigger: 'axis',
                },
                title: {
                    // 文本居中
                    left: 'center',
                    text: '日新增文章趋势',
                },
            
                xAxis: {
                    name:'日期',
                    type: 'category',
                    boundaryGap: false,
                    data: data.map(item => item.date),
                    axisLabel:{
                        color:'#555'
                    },
                
                },
                yAxis: {
                    name:'数量',
                    type: 'value',
                    // boundaryGap: [0, '100%'],
                    axisLabel:{
                        color:'#555'
                    }
                    
                },
            
                series: [
                    {
                        name: '日增长数值',
                        type: 'line',
                        // // 线条滑行
                        smooth:true,
                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        
                        areaStyle: {
                            color: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [{
                                            offset: 0, color: 'red' // 0% 处的颜色
                                        }, {
                                            offset: 1, color: '#ffffff' // 100% 处的颜色
                                        }],
                                        global: false // 缺省为 false
                                    },
                        },
                        data:data.map(item => item.count),
                        label: {
                            normal: {
                                // 线条上显示数据
                                show: true,
                                // 线条数据定位在上面
                                position: 'top'
                            },
                        }
                    }
                ],
                toolbox: {
                                show: true, //显示工具栏
                                feature: {
                                    dataZoom: { //设置缩放
                                        yAxisIndex: 'none' // 限制y轴缩放，只能X轴缩放
                                    },
                                    dataView: { readOnly: false }, // 允许编辑原始数据
                                    magicType: { type: ['line', 'bar'] }, // 设置图表可以从line(折现图)和bar(柱状图)之前来回切换
                                    restore: {},  // 设置重置数据
                                    saveAsImage: {} // 设置保存图片
                                }
                            }
            };
            
            
            myChart.setOption(option);
        })
    }


    // 3.各类型文章统计   get   /admin/data/category
    function dataCategory() {
        $.get('/admin/data/category', function (resData) {
            // console.log(resData);
            let data = resData.date

            const myChart = echarts.init(document.getElementById('pie_show'));
            const option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    top: '5%',
                    left: 'center',
                    data: data.map(item => item.name)
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['40%', '55%'],
            
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '20',
                                fontWeight: 'bold'
                            }
                        },
                    data: data.map(item => ({'name': item.name, 'value': item.articles}))
                    }
                ]
            };
            
            myChart.setOption(option);
        })
    }


    // 4.日文章访问量   /admin/data/visit  get column_show  /admin/data/article
    function dataVisit() {
        $.get('/admin/data/article', function (resData) {
            // console.log(resData);

            let data = resData.date
            
        const myChart = echarts.init(document.getElementById('column_show'));
        option = {
            xAxis: {
                type: 'category',
                data: data.map(item => item.date),
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: data.map(item => item.count),
                type: 'bar'
            }]
        };

        myChart.setOption(option);
                })
            }

    dataInfo()
    dataArticle()
    dataCategory()
    dataVisit()


    // function dataVisit() {
    //     $.get('/admin/data/visit', function (resData) {
    //         console.log(resData);

    //         let data = resData.data
            
    //     const myChart = echarts.init(document.getElementById('column_show'));
    //     option = {
    //         xAxis: {
    //             type: 'category',
    //             data: data[1]
    //             // data: data.map(item => item.data),
    //         },
    //         yAxis: {
    //             type: 'value'
    //         },
    //         series: [{
    //             data: data,
    //             // data: data.map(item => item.count),
    //             type: 'bar'
    //         }]
    //     };

    //     myChart.setOption(option);
    //             })
    //         }
})